<template>
  <div class="rightTable">
    <div class="search flex flex-wrap">
      <p class="w-[180px] mr-[10px] mb-[10px]">
        <el-input v-model="searchParams.blurry" placeholder="输入名称或者邮箱搜索" size="mini"></el-input>
      </p>
      <p class="w-[250px] mr-[10px] mb-[10px]">
        <el-date-picker
          v-model="searchParams.createTime"
          type="daterange"
          align="center"
          size="mini"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
          >
        </el-date-picker>
      </p>
      <p class="w-[100px] mr-[10px] mb-[10px]">
        <el-select v-model="searchParams.enabled" placeholder="请选择" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
      </p>
    <el-button class="mb-[10px]" type="success" icon="el-icon-search" size="mini" @click="getUsersList">搜索</el-button>
    <el-button class="mb-[10px]" type="warning" icon="el-icon-search" size="mini" @click="reset">重置</el-button>
    </div>
    <div class="handler mb-[10px]">
      <el-button type="primary" size="mini">新增</el-button>
      <el-button type="primary" size="mini">修改</el-button>
      <el-button type="primary" size="mini">删除</el-button>
      <el-button type="primary" size="mini">导出</el-button>
  </div>
  <bd-table :tableTitle="tableTitle" :tableData="tableData"></bd-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pages.page"
    :page-sizes="[10, 20, 30, 40, 50, 100]"
    :page-size="pages.size"
    layout="total, prev, pager, next, sizes"
    :total="totalElements"
    >
  </el-pagination>
  </div>
</template>
<script>
import { getUsers } from '@/api/user'
// import _ from 'lodash' 深克隆cloneDeep 浅克隆clone

const searchParams = {
  blurry: '', // 模糊搜索
  createTime: [],
  enabled: '' // 激活禁用
}
/**
 * 功能性组件
 *  - 针对某一些功能 比如依赖包 裁剪 beJSON格式化
 * 业务型组件
 *  - 渲染列表 上传
 */
export default {
  name: '',
  components: {},
  data () {
    return {
      // 搜索参数
      // 数组中嵌套数组 对象中嵌套对象 深拷贝 _.cloneDeep (vue3) 浅拷贝 Object.assign (vue2)
      // searchParams: _.cloneDeep(searchParams),
      searchParams: Object.assign({}, searchParams),
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      options: [
        {
          label: '激活',
          value: true
        },
        {
          label: '禁用',
          value: false
        }
      ],
      tableData: [],
      // 表格表头
      tableTitle: {
        // true 多选框显示 false 多选框不显示
        selection: true,
        stripe: false,
        head: [
          {
            label: '用户名',
            prop: 'username',
            width: 80,
            type: 'text'
          },
          {
            label: '昵称',
            prop: 'nickName',
            type: 'text'
          },
          {
            label: '性别',
            prop: 'gender',
            type: 'text'
            // 判断男女
            // filter: (scope) => {
            //   return scope.sex === 1 ? '男' : '女'
            // }
          },
          {
            label: '电话',
            prop: 'phone',
            width: 110,
            type: 'text',
            overflow: true
          },
          {
            label: '邮箱',
            prop: 'email',
            width: 150,
            type: 'text',
            overflow: true
          },
          {
            label: '部门',
            prop: 'dept.name',
            type: 'text',
            filter: (row) => {
              // console.log(row.dept.name)
              return row.dept.name
            }
          },
          {
            label: '状态',
            prop: 'enabled',
            type: 'switch',
            onChange: (e, { row }) => {
              console.log(e)
              console.log(row)
            }
          },
          {
            label: '创建日期',
            prop: 'createTime',
            width: 150,
            type: 'text'
          },
          {
            label: '操作',
            type: 'btn',
            width: 140,
            btn: [
              {
                icon: 'el-icon-edit',
                handlerClick: this.editClick
              },
              {
                icon: 'el-icon-delete',
                handlerClick: this.editClick
              }
            ]
          }
        ]
      },
      // 分页
      pages: {
        page: 1,
        size: 10
      },
      // 分页的条数
      totalElements: 0
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    this.getUsersList()
  },
  methods: {
    // 获取用户数据
    getUsersList () {
      console.log(this.searchParams)
      // 因为文档默认从1开始 配置页数从0开始
      const params = {
        ...this.pages,
        ...this.searchParams,
        page: this.pages.page - 1
      }
      getUsers(params).then(res => {
        // console.log(res)
        // this.tableData = res.content
        const { content, totalElements } = res
        this.tableData = content
        this.totalElements = totalElements
      })
    },
    // 重置
    reset () {
      this.searchParams = Object.assign({}, searchParams)
      this.getUsersList()
    },
    // 编辑按钮
    editClick (row) {
      console.log(row)
    },
    // 分页的条数
    handleSizeChange (size) {
      // console.log(size)
      this.pages.size = size
      this.getUsersList()
    },
    // 分页的页数
    handleCurrentChange (page) {
      // console.log(page)
      this.pages.page = page
      this.getUsersList()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-date-editor--daterange.el-input__inner {
  width: 100%;
}
::v-deep .el-range-separator {
  padding: 0;
}

</style>
